import {Form, Row, Col, Input} from 'antd'
import React, {useEffect, useState, useMemo} from 'react'
import moment from 'moment'
import {PageType} from '../constant'
import Styles from './index.less'
import {FormSelect} from '@/components/SearchForm/SearchFormItem'
import {getAllBdDitch} from '@/service/merchantCenter/clue'

interface CurrentFollowerType {
	pageType: string
	currentFollowerForm: any
	detailRecord: any
	setName: any
	setFollowPerson: React.Dispatch<any>
	mainBodyId: string
	orgId: string
	cityId: string
}

export function CurrentFollower({
	pageType,
	detailRecord,
	currentFollowerForm,
	setName,
	setFollowPerson,
	mainBodyId,
	orgId,
	cityId,
}: CurrentFollowerType) {
	const initialValues = useMemo(() => {
		setTimeout(() => currentFollowerForm.resetFields(), 1)
		const newData = {
			...detailRecord,
			followUserId:
				detailRecord?.followUserId === 0
					? undefined
					: detailRecord?.followUserId,
			followTime:
				detailRecord?.followTime === '1970-01-01 00:00:00'
					? ''
					: detailRecord?.followTime,
		}
		return newData
	}, [detailRecord])

	const disabled = pageType === 'detail'

	const [fleename, setFleeName] = useState([])

	const getAllBdDitchFun = async () => {
		getAllBdDitch({subject: mainBodyId, orgId, cityId}).then((res: any) => {
			if (res.success) {
				setFleeName(res.data)
			}
		})
	}

	useEffect(() => {
		if (orgId && cityId) {
			getAllBdDitchFun()
		}
	}, [mainBodyId, orgId, cityId])

	// 跟进人选择
	// const change = (value: any, option: any) => {
	// 	setFollowPerson(value)
	// 	if (fleename.length) {
	// 		const va: any = fleename.find((item: any) => item.id === value)
	// 		setName(va.fleetLeader)
	// 		// currentFollowerForm.setFieldsValue('followUserId', )
	// 		setTimeout(() => {
	// 			currentFollowerForm.setFieldValue(
	// 				'followMobile',
	// 				va?.fleetLeaderPhone,
	// 			)
	// 			currentFollowerForm.setFieldValue(
	// 				'followTime',
	// 				moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
	// 			)
	// 		}, 1)
	// 	}
	// 	currentFollowerForm.setFieldValue('followUserName', option?.children)
	// }

	return (
		<div className={Styles.currentFollower}>
			<div className={Styles.titleBox}>线索跟进BD登记</div>
			<div className={Styles.formBox}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="PersonalInformationFom"
					form={currentFollowerForm}
					initialValues={initialValues}
					disabled={pageType === PageType.Detail}>
					<Row>
						<Col span={8}>
							<FormSelect
								allowClear={false}
								filterOption
								label="线索跟进BD"
								name="followUserId"
								placeholder="请选择线索跟进BD"
								items={fleename}
								disabled={disabled}
								keys="id"
								title="ditchName"
								rules={[{required: true}]}
								onChange={(value: string, key: any) => {
									setFollowPerson(value)
									setName(key?.ditchName)
									currentFollowerForm.setFieldsValue({
										followUserName: key?.ditchName,
										followMobile: key?.phone,
										followTime: moment().format(
											'YYYY-MM-DD HH:mm:ss',
										),
									})
								}}
							/>
							{/* <Form.Item label="选择跟进人" name="followUserId">
								<Select
									showSearch
									placeholder="请选择"

									onChange={change}>
									{fleename.map((item: any) => (
										<Option value={item.id}>
											{item.fleetLeader}
										</Option>
									))}
								</Select>
							</Form.Item> */}
							<Form.Item name="followUserName" />
						</Col>
						<Col span={8}>
							<Form.Item label="手机号" name="followMobile">
								<Input
									// placeholder={disabled ? '' : '请输入'}
									disabled
								/>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item label="分配时间" name="followTime">
								<Input
									// placeholder={disabled ? '' : '请输入'}
									disabled
								/>
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
		</div>
	)
}
